<template>
  <div class="box">
    <order-header :title="'我的购物车'"></order-header>
    <div class="container">
      <table v-if="goodsList.length !== 0">
        <thead>
          <tr>
            <th>
              <label>
                <input type="checkbox" v-model="isAll" @change="isAlls" />
                <span>全选</span>
              </label>
            </th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in goodsList" :key="index">
            <td>
              <input type="checkbox" :checked="item.productSelected" />
            </td>
            <td>
              <img :src="item.productMainImage" alt />
              <span>{{item.productName}}</span>
            </td>
            <td>{{item.productPrice}}元</td>
            <td>
              <el-input-number
                v-model="goodsList[index].quantity"
                @change="handleChange(index)"
                :min="1"
                :max="item.productStock"
              ></el-input-number>
            </td>
            <td>{{item.productTotalPrice}}</td>
            <td>
              <span @click="deleteGoods(index)">X</span>
            </td>
          </tr>
        </tbody>
      </table>
      <h1 v-if="goodsList.length === 0">
        购物车暂无商品
        <span class="goBuy" @click="goBuy">前去购买</span>
      </h1>
    </div>
    <div v-if="goodsList.length !== 0">
      <span>已有商品:{{cartTotalQuantity}}</span>
      <span>已选商品:{{isCheckedNum}}</span>
      <span>总价:{{cartTotalPrice}}</span>
      <span class="goBuy" @click="goBuy">继续购物>></span>
      <span class="goBuy" @click="goPay">去支付</span>
    </div>
    <service-bar></service-bar>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import OrderHeader from "./../components/OrderHeader";
import NavFooter from "./../components/NavFooter";
import ServiceBar from "./../components/ServiceBar";
import { mapMutations } from "vuex";
export default {
  name: "index",
  data() {
    return {
      goodsList: [],
      isAll: false,
      cartTotalPrice: 0,
      cartTotalQuantity: 0,
    };
  },
  created() {
    this.getGoodsList();
    this.axios.get("/user");
  },
  methods: {
    ...mapMutations(["getGoodsNum"]),
    //确认订单
    goPay() {
      this.axios.get("/carts").then(() => {
        this.$router.push("/order/confirm");
      });
    },
    //删除购物车商品
    deleteGoods(index) {
      const productId = this.goodsList[index].productId;

      this.axios
        .delete("/carts/" + productId)
        .then((data) => this.showData(data));
    },
    //要显示的数据
    showData(data) {
      this.isAll = data.selectedAll;
      this.goodsList = data.cartProductVoList;
      this.cartTotalPrice = data.cartTotalPrice;
      this.cartTotalQuantity = data.cartProductVoList.length;
      this.getGoodsNum(data.cartProductVoList.length);
    },
    //改变所有商品的选中状态
    isAlls() {
      if (this.isAll) {
        this.axios.put("/carts/selectAll").then((data) => this.showData(data));
      } else {
        this.axios
          .put("/carts/unSelectAll")
          .then((data) => this.showData(data));
      }
    },
    //改变购物车商品数量
    handleChange(index) {
      const productId = this.goodsList[index].productId;
      const quantity = this.goodsList[index].quantity;
      this.axios
        .put("/carts/" + productId, {
          quantity,
        })
        .then((data) => this.showData(data));
    },
    //获取购物车商品列表
    getGoodsList() {
      this.axios.get("/carts").then((data) => this.showData(data));
    },
    //去购物
    goBuy() {
      this.$router.push("/");
    },
  },
  components: {
    OrderHeader,
    NavFooter,
    ServiceBar,
  },
  computed: {
    //选中数量
    isCheckedNum() {
      return this.goodsList.filter((v) => v.productSelected).length;
    },
  },
};
</script>


<style lang="scss" scoped>
@import "../assets/scss/config.scss";
@import "../assets/scss/reset.scss";
.goBuy {
  color: $colorA;
  font-size: 14px;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.box {
  background-color: #f5f5f5;
  .container {
    width: 1226px;
    min-height: 460px;
    background: rgba(255, 255, 255, 1);
    margin: 0 auto;
    overflow: hidden;
    table {
      width: 100%;
      thead {
        font-size: 14px;
      }
      tbody {
        tr {
          td {
            text-align: center;
            img {
              width: 80px;
              height: 80px;
              vertical-align: middle;
            }
          }
        }
      }
    }
    h1 {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>